{extend name="base:base" /}



{block name="body"}


<style>
    .panel{
        padding: 20px 10px;
        background-color: #fff;
        border: 1px solid #E6E8EB;
        cursor: pointer;
    }
    .panel:hover{
        background-color: #f1f1f1;
    }


    .panel-body {
        display: flex;
        align-items: center;
        margin-right: 15px;
        margin-left: 15px;
    }


    .panel-body .value{
        margin-left: auto;       
        padding: 10px 0;
    }
    .panel-body .value span{
        font-size: 28px;
    }
    .panel-body .quick-common{
        font-size: 1.1em;
        margin-left: 15px;
        color: #aaa;
    }
    .panel-body i{
        color: #aaa;
        font-size: 2.5em;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">


        <div class="layui-col-sm12 layui-col-md8">


            <div class="layui-card layui-form">
                <div class="layui-card-header">30天内问答增长</div>
                <div class="layui-card-body" style="min-height: 280px;">
                    <div id="thread" class="layui-col-sm12" style="height: 300px;"></div>
                </div>
            </div>

            <div class="layui-card layui-form">
                <div class="layui-card-header">30天内会员增长</div>
                <div class="layui-card-body" style="min-height: 280px;">
                    <div id="member" class="layui-col-sm12" style="height: 300px;"></div>
                </div>
            </div>


        </div>


        <div class="layui-col-sm12 layui-col-md4">


            <div class="layui-card layui-form">
                <div class="layui-card-header">统计</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <div id="" class="layui-col-sm6">
                        <div class="panel panel-white">
                            <div class="panel-body" data-title="帖子管理" data-action="<?php echo url('admin/thread/iframe') ?>">

                                <i class="layui-icon layui-icon-cart"></i>
                                <div class="quick-common">帖子</div>
                                <div class="value"><span>{$count_thread}</span>篇</div>
                            </div>
                        </div>
                    </div>
                    <div id="" class="layui-col-sm6">
                        <div class="panel panel-white">
                            <div class="panel-body" data-title="帖子管理" data-action="<?php echo url('admin/thread/iframe') ?>">
                                <i class="layui-icon layui-icon-service"></i>
                                <div class="quick-common">回复</div>
                                <div class="value"><span>{$count_thread_reply}</span>个</div>
                            </div>
                        </div>                        
                    </div>
                    <div id="" class="layui-col-sm6">

                        <div class="panel panel-white">
                            <div class="panel-body" data-title="会员管理" data-action="<?php echo url('admin/member/index') ?>">
                                <i class="layui-icon layui-icon-gift"></i>
                                <div class="quick-common">会员</div>
                                <div class="value"><span>{$count_member}</span>位</div>
                            </div>
                        </div>

                    </div>
                    <div id="" class="layui-col-sm6">

                        <div class="panel panel-white">
                            <div class="panel-body" data-title="附件管理" data-action="<?php echo url('admin/res/iframe') ?>">
                                <i class="layui-icon layui-icon-user"></i>
                                <div class="quick-common">附件</div>
                                <div class="value"><span>{$res_number}</span>个</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card layui-form">
                <div class="layui-card-header">硬盘使用量</div>
                <div class="layui-card-body" style="min-height: 280px;">
                    <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>
                </div>
            </div>


        </div>



    </div>
</div>

{/block}



{block name="foot_js"}



<script src="__PUBLIC__/libs/echarts/4.2.1/echarts.min.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main4'));
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
            {
                name: '硬盘使用量',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: <?php echo $disk_per ?? 0; ?>, name: '已使用'}]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    var option1 = {
        title: {
            text: '发贴趋势'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['帖子数']
        },
        xAxis: {
            type: 'category',
            data: [<?php echo implode(',', $lists2['date']); ?>]
        },
        yAxis: {
            type: 'value',
            scale: true
        },
        series: [{
                name: '帖子数',
                type: 'line',
                data: [<?php echo implode(',', $lists2['count']); ?>]
            }]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts.init(document.getElementById('thread')).setOption(option1);



    // 指定图表的配置项和数据
    var option3 = {
        title: {
            text: '注册趋势'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['会员数']
        },
        xAxis: {
            type: 'category',
            data: [<?php echo implode(',', $lists2['date']); ?>]
        },
        yAxis: {
            type: 'value',
            scale: true
        },
        series: [{
                name: '会员数',
                type: 'line',
                data: [<?php echo implode(',', $lists2['count']); ?>]
            }]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts.init(document.getElementById('member')).setOption(option3);
</script>

<script>

    layui.use(['jquery', 'form', 'element'], function () {
        var $ = layui.$,
                form = layui.form,
                element = layui.element;

        $('.panel-body').click(function () {
            window.parent.xadmin.add_tab($(this).data('title'), $(this).data('action'));
        });
    });

</script>

{/block}F